<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>Auto-player instantiation example, single videoElement, supplying context and source</title>

    <script src="../../dist/dash.all.debug.js"></script>
    <!--dash.all.min.js should be used in production over dash.all.debug.js
        Debug files are not compressed or obfuscated making the file size much larger compared with dash.all.min.js-->
    <!--<script src="../../dist/dash.all.min.js"></script>-->

    <script>
        function init()
        {
            var player,
                video,
                source,
                context;

            // Example specifying only the video element, where the video element has a child source element
            video = document.querySelector("#video1");
            player = dashjs.MediaPlayerFactory.create(video);

            // Example specifying only the video element, where the video element has a src attribute
            video = document.querySelector("#video2");
            player = dashjs.MediaPlayerFactory.create(video);

            //Example adding video and source
            video = document.querySelector("#video3");
            source = document.createElement("source");
            source.src = "https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd";
            source.type = "application/dash+xml";
            player = dashjs.MediaPlayerFactory.create(video, source);

            //Example adding video, source and context
            video = document.querySelector("#video4");
            source = document.createElement("source");
            source.src = "https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd";
            source.type = "application/dash+xml";
            context = {}
            player = dashjs.MediaPlayerFactory.create(video, source, context);
        }
    </script>
    <style>
        video {
            width: 320px;
            height: 180px;
        }
    </style>
    </head>
    <body>
        <div>
            <video id="video1" autoplay controls="true">
                <source src="https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd" type="application/dash+xml"/>
            </video>
            <p/>
            <video id="video2" autoplay src="https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd" controls="true"/>
            <p/>
            <video id="video3" autoplay controls="true">
            </video>
            <p/>
            <video id="video4" autoplay controls="true">
            </video>
        </div>
        <script>
            document.addEventListener("DOMContentLoaded", function () {
                init();
            });
        </script>
    </body>
</html>
